<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="杨立鑫">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .nav-bj {
            background-color: rgb(245,245,245);
        }
        .nav {
            width: 1200px;
            margin: 0 auto;
            height: 30px;
            line-height: 30px;
        }
        .zhengzhou{
            cursor: pointer;
        }
        .yincang {
            width: 500px;
            height: 300px;
            border: 1px solid red;
            padding: 5px;
            display: none;
            background-color: lightblue;
        }
        .top {
            display: flex;
            justify-content: space-between;
        }
        .x{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="nav-bj">
        <div class="nav">
            <span class="zhengzhou">郑州市</span>
            <div class="yincang">
                <div class="top">
                    <p>请选择你所在的收货地区</p>
                    <p class="x">X</p>
                </div>
            </div>
        </div>
    </div>
    <!-- <div style="height: 1000px;"></div> -->
<script>
    var zhengzhou = document.querySelector('.zhengzhou');
    var yincang = document.querySelector('.yincang');
    var x = document.querySelector('.x');

    // 点空白处隐藏
    document.body.onclick = function() {
        yincang.style.display = 'none';
    }

    // 点击郑州地址显示
    zhengzhou.onclick = function(ev) {
        // 事件不能向上body冒泡，否则，会触发body中隐藏的操作，会先执行这里的显示，再执行body中的隐藏
        yincang.style.display = 'block';
        ev.stopPropagation();
    }
    
    // 点击x隐藏
    x.onclick = function(ev) {
        yincang.style.display = 'none';
    }
    

</script>
</body>
</html>